<template>
  <div class="w-full overflow-x-auto">
    <div class="inline-block whitespace-nowrap">
      <template v-for="(el, index) in formatByFSM" :key="`${keyPrefix}-${index}`">
        <span :style="{ color: el.color || '#ffffff' }">
          {{ el.text }}
        </span>
        <br v-if="el.isNewLine" />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
//import { D2TextFormatter, D2TextSpan } from '../common/d2Color';
import { toAppText } from '../common/d2Text';

const props = defineProps<{
  text?: string;
  keyPrefix?: string;
}>();

//const d2TextFormatter = new D2TextFormatter();

/* 
//使用正则将格式化文本为 D2TextSpan 二维数组
const formatByRegx = computed<D2TextSpan[][]>(() => {
  return d2TextFormatter.parse(props.text);
});
*/
const formatByFSM = computed(() => {
  return toAppText(props.text);
});

</script>


<style scoped>
/* 所有样式已通过 Tailwind CSS 类实现 */
</style>